@import url('./variable.less');

.hide {
  display: none !important;
}

.fl{
  float: left;
}
.fr{
  float: right;
}

.ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.clear() {
  &:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
  }
}
.border-box() {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.horizontal-flex() {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.vertical-flex() {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
}

/**
 * [flex description]
 * @param  {[type]} @grow              [description]
 * @param  {[type]} @shrink            [description]
 * @param  {[type]} @base:auto         [description]
 * @param  {[type]} @degradeGrow:@grow [安卓低版本兼容]
 * @return {[type]}                    [description]
 */
.flex(@grow, @shrink, @base:auto, @degradeGrow:@grow) {
  -webkit-box-flex: @grow;
  -webkit-box-flex: @degradeGrow;
  -moz-box-flex: @grow;
  -webkit-flex: @grow @shrink @base;
  flex: @grow @shrink @base;
}
.transform(@trans) {
  -webkit-transform: @trans;
  -moz-transform: @trans;
  transform: @trans;
}
.transition(@trans){
  -webkit-transition: @trans;
  -moz-transition: @trans;
  transition: @trans;
}
.justify-content(@justify:center) {
  -moz-box-pack: @justify;
  -webkit-box-pack: @justify;
  -webkit-justify-content: @justify;
  justify-content: @justify;
}
.align-items(@align:center){
  -moz-box-align: @align;
  -webkit-box-align: @align;
  -webkit-align-items: @align;
  align-items: @align;
}

.placeholder-color(@color, @fontSize: 14px) {
  &::-webkit-input-placeholder { /* WebKit browsers */
    color: @color;
    font-size: @fontSize;
  }
  &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: @color;
    font-size: @fontSize;
    opacity: 1;
  }
  &::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: @color;
    font-size: @fontSize;
    opacity: 1;
  }
  &:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: @color;
    font-size: @fontSize;
  }
}

//border-top
.borderT(@color){
  border-top:1px solid @color;
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2) {
    background-image: -webkit-linear-gradient(top, @color 0%, @color 50%, transparent 50%,transparent 100%);
    background-image: linear-gradient(to bottom, @color 0%, @color 50%, transparent 50%,transparent 100%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top;
    border: none;
  }
}
//border-bottom
.borderB(@color){
  border-bottom:1px solid @color;
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2) {
    background-image: -webkit-linear-gradient(bottom, @color 0%, @color 50%, transparent 50%,transparent 100%);
    background-image: linear-gradient(to top, @color 0%, @color 50%, transparent 50%,transparent 100%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom;
    border:none;
  }
}
//border-right
.borderR(@color){
  border-right:1px solid @color;
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2) {
    background-image: -webkit-linear-gradient(right, @color, @color 50%, transparent 50%);
    background-image: linear-gradient(to left, @color, @color 50%, transparent 50%);
    background-size: 1px 100%;
    background-repeat: no-repeat;
    background-position: right top;
    border: none;
  }
}
//border-left
.borderL(@color){
  border-left:1px solid @color;
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2) {
    background-image: -webkit-linear-gradient(left, @color, @color 50%, transparent 50%);
    background-image: linear-gradient(to right, @color, @color 50%, transparent 50%);
    background-size: 1px 100%;
    background-repeat: no-repeat;
    background-position: left top;
    border:none;
  }
}
//border-上下左右
.borderTRBL(@color){
  border:1px solid @color;
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2) {
     background-image: -webkit-linear-gradient(top, @color, @color 50%, transparent 50%),
    -webkit-linear-gradient(right, @color, @color 50%, transparent 50%),
    -webkit-linear-gradient(bottom, @color, @color 50%, transparent 50%),
    -webkit-linear-gradient(left, @color, @color 50%, transparent 50%);

    background-image: linear-gradient(to top, @color, @color 50%, transparent 50%),
    linear-gradient(to left, @color, @color 50%, transparent 50%),
    linear-gradient(to top, @color, @color 50%, transparent 50%),
    linear-gradient(to right, @color, @color 50%, transparent 50%);

    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    background-repeat: no-repeat;
    background-position: top, right top, bottom, left top;
    border: none;
  }
}
//border-上下
.borderTB(@tColor, @bColor:@tColor){
  border-top:1px solid @tColor;
  border-bottom:1px solid @bColor;
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2) {

    background-image: -webkit-linear-gradient(top, @tColor, @tColor 50%, transparent 50%),
    -webkit-linear-gradient(bottom, @bColor, @bColor 50%, transparent 50%);

    background-image: linear-gradient(to bottom, @tColor, @tColor 50%, transparent 50%),
    linear-gradient(to top, @bColor, @bColor 50%, transparent 50%);
    background-size: 100% 1px, 100% 1px;
    background-repeat: no-repeat;
    background-position: top, bottom;
    border: none;
  }
}

//border-右下
.borderRB(@rColor, @bColor:@rColor) {
  border-right:1px solid @rColor;
  border-bottom:1px solid @bColor;
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2) {

    background-image: -webkit-linear-gradient(right, @rColor, @rColor 50%, transparent 50%),
    -webkit-linear-gradient(bottom, @bColor, @bColor 50%, transparent 50%);

    background-image: linear-gradient(to left, @rColor, @rColor 50%, transparent 50%),
    linear-gradient(to right, @bColor, @bColor 50%, transparent 50%);

    background-size: 1px 100%, 100% 1px;
    background-repeat: no-repeat;
    background-position: right, bottom;
    border: none;
  }
}

.linearGradient(@colorL, @colorR) {
  background-image: linear-gradient(to right, @colorL, @colorR);
  background-image: -webkit-linear-gradient(to right, @colorL, @colorR);
}

.button(@colorL: #27a9b0, @colorR: #31bcad, @textColor: #fff){
  background-image:linear-gradient(-135deg, @colorL 0%, @colorR 100%);
  background-image:-webkit-linear-gradient(-135deg, @colorL 0%, @colorR 100%);
  border-radius: 2px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border: none;
  font-size: 18px;
  color: @textColor;
  letter-spacing: -0.43px;
  text-align: center;
}

.button-disabled(@colorL:#a7e5df, @colorR: #a0e0e4) {
  background-image:linear-gradient(-135deg, @colorL 0%, @colorR 100%);
  background-image:-webkit-linear-gradient(-135deg, @colorL 0%, @colorR 100%);
}

.container {
  .vertical-flex;
  .clear;
  max-width: 100%;
  min-height: 100%;
}

.right-arrow(@color) {
  content: '';
  .horizontal-flex;
  .align-items;
  height: 100%;
  width: 8px;
  height: 8px;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  border-bottom: 1px solid @color;
  border-right: 1px solid @color;
}

input::-webkit-input-placeholder {
  color: @disable-text-color;
}

input::-moz-placeholder {
  color: @disable-text-color;
}

.icon(){
  display: inline-block;
  border-radius: 50%;
}
